<template>
  <div
    class="seq-item"
    :key="'item-'+itemIndex"
    :class="{'item-striped':(itemIndex%2==0)}"
    :style="{height:itemHeight+'px'}"
  >
    <!-- 分割线 -->
    <template v-for="(col,colIndex) in headers">
      <div
        class="seq-item-spliter"
        :key="'item-'+itemIndex+'-'+colIndex"
        :style="itemStyle.spliter"
      ></div>
    </template>

    <!-- line a to b -->
    <div
      @click="lineClick"
      :key="'line-'+itemIndex"
      class="arrow_line"
      :class="itemStyle.directionClass"
      :style="itemStyle.line"
    >
      <div class="arrow_to_left"></div>
      <div class="line"></div>
      <div class="arrow_to_right"></div>
      <div class="note">{{itemData.note}}</div>
      <div class="line_label" :style="itemStyle.label">{{itemData.label}}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SeqItem',
  props: {
    // 头部 ['header1','header2','header3']
    headers: {
      type: Array
    },
    // 行索引
    itemIndex: {
      type: Number
    },
    // 行高
    itemHeight: {
      type: Number
    },
    // 行对象
    itemData: {
      type: Object
    },
    // item 样式
    itemStyle: {
      type: Object
    },
    // 点击事件
    lineClick: {
      type: Function
    }
  }
}
</script>

<style lang="less" scoped>
@px: 0.0625em;
@small_font_size: 10 * @px;
@midium_font_size: 12 * @px;
@large_font_size: 14 * @px;
@huge_font_size: 16 * @px;
@box_bordercolor: black;

@hover_box_bordercolor: red;
@hover_box_backcolor: #ccc;

.seq-item {
  display: flex;
  flex-direction: row;
  position: relative;
  // justify-content:space-around;
  align-items: center;

  .seq-item-spliter {
    width: 0;
    height: 100%;
    border-left: 1px dashed #bbb;
  }

  .arrow_line {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    height: @small_font_size;
    z-index: 0;
    width: 200px;
    .line {
      // border-bottom: @px solid @box_bordercolor;
      height: 0;
      flex: 1;
    }
    .dashline {
      // border-bottom: @px dashed @box_bordercolor;
      height: 0;
      flex: 1;
    }
    .arrow_to_right:before {
      content: '▶';
      // color: @box_bordercolor;
      margin-left: -2px;
      font-size: 20px;
    }
    .arrow_to_left:before {
      content: '◀';
      // color: @box_bordercolor;
      margin-right: -2px;
      font-size: 20px;
    }
    .note {
      position: absolute;
      margin: auto;
      top: -@large_font_size;
      left: 0;
      bottom: 0;
      right: 0;
      text-align: center;
      font-size: @large_font_size;
      padding: 0 8 * @px 0 8 * @px;
      // color: dimgray;
    }
    .line_label {
      position: absolute;
      font-size: @midium_font_size;
      z-index: 0;
      text-align: left;
    }
  }

  .line_right {
      color: rgb(64, 158, 255);
    .line{
      border-bottom: @px solid rgb(64, 158, 255);
    }
    .arrow_to_right {
      display: block;
    }
    .arrow_to_left {
      display: none;
    }
  }
  .line_left {
      color: rgb(103, 194, 58);
    .line{
      border-bottom: @px solid rgb(103, 194, 58);
    }
    .arrow_to_right {
      display: none;
    }
    .arrow_to_left {
      display: block;
    }
  }

  .self_msg_line {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    height: @small_font_size;
    z-index: 0;
    width: 200px;
    .link {
      width: 1.5 * @huge_font_size;
      height: 1.5 * @huge_font_size;
      border: @px solid @box_bordercolor;
      border-left: 0;
    }
    .dashlink {
      width: 1.5 * @huge_font_size;
      height: 1.5 * @huge_font_size;
      border: @px dashed @box_bordercolor;
      border-left: 0;
    }
    .arrow:before {
      content: '◀';
      color: @box_bordercolor;
      position: absolute;
      left: 0;
      bottom: -1.25 * @large_font_size;
    }
    .note {
      flex: 1;
      text-align: left;
      font-size: @midium_font_size;
      color: dimgray;
      padding-left: 5 * @px;
    }
  }

  .arrow_line:hover {
    cursor: pointer;
    background: @hover_box_backcolor;
    .line {
      border-bottom: @px solid @hover_box_bordercolor;
    }
    .dashline {
      border-bottom: @px dashed @hover_box_bordercolor;
    }
    .arrow_to_right:before {
      color: @hover_box_bordercolor;
    }
    .arrow_to_left:before {
      color: @hover_box_bordercolor;
    }
    .line_label {
      color: @hover_box_bordercolor;
    }
  }
}


  .item-striped{
    // background: #fafafa;
    // background: rgb(240, 249, 235);
    // background: rgb(225, 243, 216);
    // background: rgb(217, 236, 255);
    // background: rgb(236, 245, 255);
    background: rgb(248, 248, 248);
  }
</style>